<template>
    <div class="sdy-home-hot">
        <div class="top">
            <span>京东秒杀</span>
            <p>
                <span>{{hours}}</span>:
                <span>{{minutes}}</span>:
                <span>{{seconds}}</span>
            </p>
            <span>按钮</span>
        </div>
        <div class="content">
            <ul>
                <li v-for="item in hotList" :key="item.proid">
                    <img :src="item.img1" alt="">
                    <span>{{ item.sales }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { Dialog } from 'vant';
import { hotListApi } from '@/api/goods';
import { ref, onMounted, watch } from 'vue'
import type { MyHotItem } from '@/config/interface'

const hotList = ref<MyHotItem[]>([])

// 倒计时逻辑
// 定义一个倒计时 时间
const ms=ref<number>(123456)

const timer=setInterval(()=>{
    ms.value--
},1000)

//准备时间
const hours=ref<number>()
const minutes=ref<number>()
const seconds=ref<number>()

watch(ms,()=>{
    hours.value=Math.floor(ms.value/(60*60))
    minutes.value=Math.floor(ms.value%(60*60)/60)
    seconds.value=Math.floor(ms.value%60)
    if (ms.value <= 0){
        clearInterval(timer)
        Dialog.alert({ title: '秒杀', message: '秒杀已经开始, 开来吧', theme: 'round-button', })
    }
})
 
onMounted(async () => {
    const res = await hotListApi({ limitNum: 20 })
    hotList.value = res.data
})

</script>
  
<style scoped lang="scss">
@import '@/styles/variable.scss';

.sdy-home-hot {
    height: 210px;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    flex-direction: column;
    background-clip: content-box;

    >.top {
        height: 50px;
        background: url() no-repeat;
        background-size: 100% 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 10px;

        >p {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: -150px;
            height: 30px;

            >span {
                background-color: $globalColor;
                padding: 2px 3px;
                font-size: 12px;
                color: #fff;
                margin: 0 2px;
                border-radius: 5px;
                overflow: hidden;
            }
        }
    }

    >.content {
        // height: 130px;
        flex: 1;
        overflow: auto;

        // 去掉滚动条
        &::-webkit-scrollbar {
            width: 0
        }

        >ul {
            // border: 1px solid red;
            display: flex;
            height: 100%;

            >li {
                // height: 100%;
                width: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                // background-color: aquamarine;
                padding: 5px;
                background-clip: content-box;
                border: 1px solid #333;
                margin: 0 2px;

                >img {
                    width: 45px;
                    height: 45px;
                    display: block;
                }

                >span {
                    color: red;
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>